<template>
    <div class="toasts d-flex justify-content-center align-items-center "
        :class="{invisible : showing }"
     data-autohide="true"  >
       <!-- Then put toasts within -->
        <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
            <div class="toast-header">
            <strong class="mr-auto" v-text="titlename"></strong>
            <button type="button" class="ml-2 mb-1 close " data-dismiss="toast" 
            @click="hideToast"
            aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="toast-body bg-light">
                <div class="d-flex justify-content-center">
                    <!-- 注册 -->
                    <register v-if="type == 'register' " />
                    <!-- 登录 -->
                    <loginer v-if=" type == 'login'" />
                    <!-- 注册结果 -->
                    <res-reg ref="resultOf" v-if=" type == 'resultOfRegister'"  :message="msg"></res-reg>
                </div>     
            </div>
        </div>
        <div v-if="showLoading" class="loading d-flex justify-content-center align-items-center">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
</template>

<script>
// import weichat from "./register/weixin.vue";
import register from "./register/usernameReg.vue";
import loginer from "./loginer/usernameLogin.vue";
import resReg from "./register/result.vue";

export default {
    components:{
        // weichat
        register,
        loginer,
        resReg
    },
    props:['leader'],
    inject:['getParent'],
    provide:function(){
        let that = this;
        return {
            thisOfToast: function(){
                return that;
            }
        };
    },
    data(){
        return {
            showing: true,
            type:"",
            titlename:"",
            showLoading: false,
            msg: ""
        };
    },
    methods:{
        showToast( type ){
            
            try{
                switch( type ){
                    case "login": this.type = type; this.titlename = "登录"; break;
                    case "register": this.type = type; this.titlename = "注册";  break;
                    default: throw new Error("btn type can not be empty or some not exist."); 
                }
            }catch(er){
                console.log(er);
                return ;
            }
            
            this.showing = false; 
            this.leader.$('.toast').toast("show");
            
        },
        hideToast(){
            this.leader.$('.toast').toast("hide");
            this.showing = true; 
            this.type = "";
            if(this.$refs.resultOf){
                this.$refs.resultOf.resetStatus();
            }
            
        },
        statusLoading( sta ){
           this.showLoading = sta;
        }

    },
    mounted(){

        
    }
}
</script>

<style lang="scss">
.toasts{
    position: fixed;
    z-index: 100;
    left: 0;right: 0;
    top: 0; bottom:0;
}
.loading{
    position: fixed;
    z-index: 101;
    left: 0;right: 0;
    top: 0; bottom:0;
}
</style>